<template>
  <div style="border: 2px solid #c24a3d;">
    <h5>父组件</h5>
    <h2>测试父子组件间传参以及生命周期的使用</h2>
    <h5>接收子组件传来的参数(toFatherParams)</h5>
    <h5>name:{{username}}</h5>
    <h5>age:{{userage}}</h5>
    <h5>id:{{userid}}</h5>
    <button @click="getAttr">getChildAttr</button>
    <Child
      ref="child"
      name="11"
      :person="person"
      :ArrData="ArrData"
      @toFatherParams="toFatherParams"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs } from 'vue'
import Child from './userList-Child.vue'
interface infoData {
  name: string, // string/number首字母要使用小写
  age: number,
  id: number
}
// 传递给子组件的参数
const person = ref({ name: 'lili', age: 22 })
const ArrData = ref([1, 2, 3, 4])
// 接收子组件的参数
const username = ref('name?')
const userage = ref(10)
const userid = ref(456)
const toFatherParams = (e: infoData) => {
  console.log(e)
  const { name, age, id } = toRefs(e)
  username.value = name.value
  userage.value = age.value
  userid.value = id.value
}
// 通过ref获取子组件的属性(前提是只能获取子组件自己暴露出的属性)
const child = ref(null)
const getAttr = () => {
  console.log('child:', (child.value as any).handle()) // "调用成功"
}
</script>

<style>
</style>
